<template>
  <div id="sudoku-demo" class="demo" ref="container">
    <el-row type="flex">
      <el-col :span="14">
        <h1>抽奖</h1>
        <el-button type="primary" @click="shuffle">乱序</el-button>
        <el-button :disabled="!canStart" type="success" @click="start"
          >开始</el-button
        >
        <el-button :disabled="canStart" type="warning" @click="stop"
          >暂停</el-button
        >
        <el-divider>奖池</el-divider>
        <transition-group name="cell" tag="div" class="container">
          <rollCell
            v-for="(item, index) in list"
            :key="item.id"
            :active="activeIndex === index"
            :index="index"
            @removeItem="removeItem"
            >{{ item.name }}-{{ item.count }}</rollCell
          >
        </transition-group>
        <el-divider>
          抽奖结果
          <el-button class="copy-btn" type="success" v-if="results.length > 0"
            >拷贝</el-button
          >
        </el-divider>
        <transition-group name="cell" tag="div" class="container">
          <resCell v-for="item in results" :key="item.id"
            >{{ item.name }}-{{ item.count }}</resCell
          >
        </transition-group>
        <!-- 隐藏的用来保存文本框-->
        <div class="hidden-box" ref="hiddenBox" v-html="markdownList"></div>
      </el-col>
      <el-col class="my-col" :span="10">
        <my-chart ref="myChart"></my-chart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入默认数据
import list from './data/data'
import _ from 'lodash'
import rollCell from './components/rollCell.vue'
import resCell from './components/resCell.vue'
import Clipboard from 'clipboard'
import myChart from './components/myChart.vue'
// 缓存的key
const STUKEY = 'SZ76'
export default {
  name: 'app',
  data: function() {
    return {
      // 完整的数据
      localData: [],
      list: [],
      // 高亮类名
      activeIndex: -1,
      // 抽奖结果
      results: [],
      // 定时器id
      timeId: undefined
    }
  },
  mounted() {
    // 初始化剪贴板
    this.initClip()
    // 初始化数据
    this.initData()
    // 渲染Echarts
    this.$refs.myChart.renderChart(this.localData)
  },
  components: {
    rollCell,
    resCell,
    myChart
  },
  computed: {
    markdownList() {
      return (
        ',' +
        this.results
          .map(v => {
            return `${v.name}`
          })
          .join(',')
      )
    },
    max() {
      return this.list.length - 1
    },
    canStart() {
      return this.timeId === undefined
    }
  },
  methods: {
    // 初始化剪贴板
    initClip() {
      const clipboard = new Clipboard('.copy-btn', {
        target: () => {
          return this.$refs.hiddenBox
        }
      })
      clipboard.on('success', () => {
        this.$message.success('拷贝成功!')
      })
    },
    // 读取数据
    initData() {
      // 读取缓存数据
      const _localData = window.localStorage.getItem(STUKEY)
      // 非空判断
      if (_localData === null) {
        this.localData = list
        this.list = [...this.localData]
        return
      }
      this.localData = JSON.parse(_localData)
      this.list = [...this.localData]
    },
    // 删除
    removeItem(index) {
      this.list.splice(index, 1)
    },
    // 随机数
    // 乱序
    shuffle: function() {
      clearInterval(this.timeId)
      this.timeId = undefined
      this.activeIndex = -1
      this.list = _.shuffle(this.list)
    },
    // 生成不重复的随机数
    randomNum() {
      let newIndex
      do {
        newIndex = _.random(0, this.max)
      } while (newIndex === this.activeIndex)
      this.activeIndex = newIndex
    },
    // 随机
    start() {
      clearInterval(this.timeId)
      this.timeId = undefined
      this.timeId = setInterval(this.randomNum, 50)
    },
    // 写入数据
    saveData() {
      window.localStorage.setItem(STUKEY, JSON.stringify(this.localData))
    },
    // 停止
    async stop() {
      clearInterval(this.timeId)
      this.timeId = undefined
      // 累加
      this.list[this.activeIndex].count++
      this.results.push(...this.list.splice(this.activeIndex, 1))
      // 保存数据
      this.saveData()
      // 更新图表
      this.$refs.myChart.renderChart(this.localData)
      // 重置索引
      this.activeIndex = -1
    }
  }
}
</script>

<style lang="less">
.container {
  display: flex;
  flex-wrap: wrap;
  width: 850px;
  margin-top: 10px;
  margin: 0 auto;
}
.hidden-box {
  opacity: 0;
}
.my-col {
  height: 100%;
}
</style>
